﻿<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
	</head>
	<body>
		<div id="app">
			<my-component></my-component>
		</div>
	
	    <script src="https://unpkg.com/vue@next"></script>
        <script>
            const app = Vue.createApp({});
        	app.component('my-component', {
        		data(){
        			return {
        				message: 'Java无难事'
        			}
        		},
        		methods: {
        			change(){
        			    /*
                        this.message = 'VC++深入详解';
                        console.log(this.$refs.msg.textContent);*/
                        /*
                        this.message = 'VC++深入详解';
                        Vue.nextTick(() => console.log(this.$refs.msg.textContent))*/
                        this.message = 'VC++深入详解';
                        this.$nextTick(function(){
                            console.log(this.$refs.msg.textContent);
                        })
                    }
        		},
                template: `
              	<div>
              		<p ref="msg">{{ message }}</p>
              		<button @click="change">修改内容</button>
              	</div>`
        	})
        	
        	app.mount('#app');
        </script>
	</body>
</html>